<template>
  <div id="abc">
       <ul>
  <!-- 热搜词 -->
           <template v-for="item in hotArr">
               <li :key='item.id'>
                   <span @click="just(item.first)">{{item.first}}</span>
               </li>
           </template>
       </ul>
    <div class="history">
        <ul>
        <!-- 历史记录 -->
           <template v-for="(item,index) in abc" >
               <li :key='index'>
                <i class="iconfont icon-zu"> </i>
                  <span @click="sou(item)">{{item}}</span>
                  <i class="iconfont icon-guanbi" @click="delItem(index)"></i>
               </li>
           </template>
       </ul>
    </div>
  </div>
</template>

<script>
export default {
props:["hotArr","abc"],
methods: {
    //点击删除历史记录
    delItem(index){
        this.abc.splice(index,1)
    },
     just(value) {
       console.log(value);
      this.$emit("just", value);
    },
  sou(item){
    console.log(item);
     this.$emit("sou", item);
  }
   
}
}
</script>
<style lang="scss" scoped>
#abc{
     margin-left:  _vw(10);
     margin-top:  _vw(15);    
      ul{
          // display: flex;
          // flex-wrap: wrap;
          // justify-content: space-around;
          
          li{
            display: inline-block;
            height: _vw(80);
            text-align: center;
            line-height: _vw(80);
            margin-right: _vw(20);
          span{
            
            border:1px solid rgba(235,236,236);
            padding: _vw(10) _vw(20);
            border-radius:_vw(40)
      }
      }
      }
      .history{
          ul{
              li{
                  width: 100%;
                  height: _vw(90);
                //   background-color:palegoldenrod;
                  display: flex;
                  justify-content: space-between;
                   border-bottom:1px  solid rgba(235,236,236);
                 i{
                   padding-top: _vw(10);
                      width:  _vw(70);
                    //   background-color: green;
                      font-size:_vw(30);
                      color:rgba(204,205,205);
                      }
                  span{
                         width:  _vw(616.66);
                        //  background-color: pink;
                        text-align: left;
                        line-height: _vw(75);
                        font-size:_vw(34) ;
                       border: none;
                  }
                   }
              
         
         }
      }

}

</style>